<template>
  <div v-loading="loading" class="main_content">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
    </el-input>
    <!-- show-checkbox default-expand-all node-key="id"  -->
    <el-tree class="filter-tree" accordion :data="data"
      :props="defaultProps" @node-click="handleNodeClick" @check="handleCheck" :filter-node-method="filterNode" ref="tree"></el-tree>

  </div>
</template>
<script>
  import {
    listCommodity
  } from "@/api/hd/commodity";

  export default {
    name: "Tree",
    components: {

    },
    data() {
      return {
        loading: true,
        filterText: '',
        data: [],
        treeList: [],
        total: null,
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    watch: {
      filterText(val) {
        // console.log(val)
        this.$refs.tree.filter(val);
      }
    },
    created() {

    },
    mounted() {
      this.getList()
    },
    methods: {
      /** 查询商品管理列表 */
      getList() {
        this.loading = true;
        listCommodity({}).then(response => {
          this.data = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        // console.log(value)
        return data.name.indexOf(value) !== -1;
      },
      handleNodeClick(node, data) {
        // console.log(data);
        // console.log(node);
        this.$emit("handleNode", data)
      },
      handleCheck(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys){
        // this.$emit("handleCheck", checkedKeys)
      }
    }
  };
</script>

<style lang="scss">
  .main_content {
    width: calc(100%);
    // height: 800px;
    height: calc(100vh - 120px);
    overflow-y: scroll;
    
  }

  .main_content .el-input {
    padding: 0px 20px 20px 20px;
  }
</style>
